<template>
    <view>
        <AntdConfirmModal :title="`角色【${form.roleName}】修改`" ref="modalRef" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 6 }">
                <a-form-item label="归属部门" name="deptId" label-width="100px"
                    :rules="[{ required: true, message: '选择归属部门' }]">
                    <a-tree-select v-model:value="form.deptId" allow-clear :tree-data="deptStore.deptTree" :field-names="{
                        value: 'id',
                        label: 'deptName',
                        children: 'children',
                    }" placeholder="选择归属部门" />
                </a-form-item>
                <a-form-item label="角色名称" name="roleName" :rules="[{ required: true, message: '请输入角色名称' }]">
                    <a-input v-model:value="form.roleName" placeholder="请输入角色名称" />
                </a-form-item>
                <a-form-item label="权限字符" name="roleKey" :rules="[{ required: true, message: '请输入权限字符' }]">
                    <a-input v-model:value="form.roleKey" placeholder="请输入权限字符" />
                </a-form-item>
                <a-form-item label="角色顺序" name="roleSort">
                    <a-input-number v-model:value="form.roleSort" :min="0" style="width: 150px" />
                </a-form-item>
                <a-form-item label="状态" name="status">
                    <a-radio-group v-model:value="form.status">
                        <a-radio v-for="dict in status_dict" :value="dict.value" :key="dict.value" :label="dict.value">{{
                            dict.label
                        }}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="资源权限">
                    <a-tree-select  @change="permChange"  v-model:value="form.permissions" tree-checkable allow-clear :tree-data="resOptions"
                        placeholder="选择资源权限"  />
                </a-form-item>
                <a-form-item label="角色描述" name="roleDescription">
                    <a-textarea v-model:value="form.roleDescription" type="textarea" placeholder="请输入内容"></a-textarea>
                </a-form-item>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import {updateOne, queryOne} from '@/module/org/api/role';
import { treeSelect } from "@/module/org/api/res";
import { status_dict, sex_dict } from '@/constant/dict'
import useApp from '@/hooks';
const { $ } = useApp();
const modalRef = ref(null);
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
const resOptions = ref([])

const form = ref({
  deptId: undefined,
  id: undefined,
  permissions: [],
  roleDescription: undefined,
  roleKey: undefined,
  roleName: undefined,
  roleSort: 0,
  status: 1,
});
// 监听
$.on('update-role',id=>{
    queryOne(id).then(res=>{
        form.value = res;
        modalRef.value.openModal();
    })
    
})
function permChange(e){
    console.log(e)
    form.permissions = e;
}
// 构建权限树
function buildRsrTree(){
    treeSelect().then(res=>{
        resOptions.value = res;
    })
}
buildRsrTree();
// 提交表单
function submitForm(){
    updateOne(form.value).then(res=>{
        console.log(res)
        $.showToast({
            title: '更新成功',
            icon: 'success'
        })
        $.emit('fresh-role',null);
        modalRef.value.closeModal()
    })
}
</script>